<template>
    <div class="monitor-operateLog-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="monitor-operateLog-search mb15">
                <el-input size="default" v-model="state.dataForm.username" placeholder="请输入用户名称" style="max-width: 180px"></el-input>
                <el-button size="default" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search/>
                    </el-icon>
                    查询
                </el-button>
            </div>
            <el-table :data="state.dataList" v-loading="state.dataListLoading" border style="width: 100%">
                <el-table-column type="index" label="序号" width="80" align="center"/>
                <el-table-column prop="title" label="模块名称" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="content" label="日志内容" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="method" label="方法名称" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="requestMethod" label="请求方式" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="operName" label="操作人员" show-overflow-tooltip align="center"></el-table-column>
<!--                <el-table-column prop="requestUrl" label="请求URL" show-overflow-tooltip align="center"></el-table-column>-->
<!--                <el-table-column prop="ip" label="请求IP地址" show-overflow-tooltip align="center"></el-table-column>-->
<!--                <el-table-column prop="ipLocation" label="IP归属地" show-overflow-tooltip align="center"></el-table-column>-->
<!--                <el-table-column prop="requestParam" label="请求参数" show-overflow-tooltip align="center"></el-table-column>-->
<!--                <el-table-column prop="responseResult" label="响应参数" show-overflow-tooltip align="center"></el-table-column>-->
                <el-table-column prop="status" label="操作状态" show-overflow-tooltip align="center">

                </el-table-column>
                <el-table-column prop="operTime" label="操作时间" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="takeTime" label="耗时" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="danger"
                                   @click="state.deleteHandle(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="state.page" :page-size="state.limit"
                           :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                           class="mt15"
                           @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"/>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="operateLog">
import {reactive, ref, toRefs} from 'vue';
import ApiConfig from "/@/api/ApiConfig";
import useView from "/@/hooks/useView";
import {useDictStore} from "/@/stores/dict";


// 定义变量内容
const userDialogRef = ref();
const view = reactive({
    getDataListURL: ApiConfig.SYSTEM.OPERATE_LOG,
    getDataListIsPage: true,
    deleteURL: ApiConfig.SYSTEM.OPERATE_LOG,
    deleteIsBatch: true,
    dataForm:{
        username:''
    },
    configVisible: false,
    uploadVisible: false
});

const state = reactive({...useView(view), ...toRefs(view)});

</script>

<style scoped lang="scss">
.monitor-operateLog-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}
</style>
